<script setup>
/*// 导入demo文件夹中的所有组件(同步加载)
const componentsGlob = import.meta.glob('@/components/demo/*.vue', {eager: true})
const components = Object.keys(componentsGlob).map((key) => {
    const name = key.split('/').pop().split('.').shift()
    return {
        name,
        component: componentsGlob[key].default
    }
})*/
// 导入demo文件夹中的所有组件(异步加载)
import {defineAsyncComponent} from "vue";

const componentsGlob = import.meta.glob('@/components/demo/*.vue')
const components = Object.keys(componentsGlob).map((key) => {
    const name = key.split('/').pop().split('.').shift()
    // noinspection JSCheckFunctionSignatures
    return {
        name,
        component: defineAsyncComponent(componentsGlob[key])
    }
})
</script>

<template>
  <!-- Element plus布局容器 -->
    <el-container>
        <!-- 主体 -->
        <el-main>
            <el-tabs type="border-card">
                <el-tab-pane v-for="item in components" :key="item.name" :label="item.name">
                    <component :is="item.component"/>
                </el-tab-pane>
            </el-tabs>
        </el-main>
    </el-container>
</template>


<style scoped src="@/assets/Index.css"></style>